import Vue from 'vue'
import _ from 'lodash'
const draggable = {
    inserted: function (el, binding, vnode) {
        // 拖拽时间标识
        let firstTime = ''
        let lastTime = ''
        el.style.cursor = 'move'

        el.onmousedown = function (e) {
            let disx = e.pageX - el.offsetLeft
            let disy = e.pageY - el.offsetTop
            el.setAttribute('drag-flag', false)
            firstTime = new Date().getTime()
            document.onmousemove = function (e) {


                let x = e.pageX - disx
                let y = e.pageY - disy
                let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
                let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
                // if (x < 0) {
                //     x = 0
                // }
                // else if (x > maxX) {
                //     x = maxX
                // }

                if (y < 0) {
                    y = 0
                }
                else if (y > maxY) {
                    y = maxY
                }

                el.style.left = x + 'px'
                el.style.top = y + 'px'
                lastTime = new Date().getTime()
                if (lastTime - firstTime > 200) {
                    el.setAttribute('drag-flag', true)
                }

            }

            document.onmouseup = function (event) {
                Vue.nextTick(() => {
                    console.log('???????????')
                    document.onmousemove = document.onmouseup = null
                    let index = binding.value.index
                    var div = document.getElementById("luckysheetTableContent");
                    div.onmouseout = function (event) {
                        console.log('???????????')
                        //如果离开，则执行。。
                    }
                    var x1 = event.clientX;
                    var y1 = event.clientY;
                    var divx1 = getLeft(div);
                    var divy1 = getTop(div);
                    var divx2 = divx1 + div.offsetWidth;
                    var divy2 = divy1 + div.offsetHeight;
                    // console.log('是否拖拽在表格内', x1 < divx1 || x1 > divx2 || y1 < divy1 || y1 > divy2)
                    if (x1 < divx1 || x1 > divx2 || y1 < divy1 || y1 > divy2) {
                    } else {

                    }
                    vnode.context.setCellValue(el.getAttribute('drag-flag'), binding.value.item)
                    el.style.left = '30px'
                    el.style.top = 30 * (index + 1) + 'px'
                })

            }
        }
    },
}
function getTop(e) {
    let el = e
    var offset = el.offsetTop;
    if (el.offsetParent != null) offset += getTop(el.offsetParent);
    return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e) {
    let el = e
    var offset = el.offsetLeft;
    if (el.offsetParent != null) offset += getLeft(el.offsetParent);
    return offset;
}
export default draggable